<template>
	<div>
		<div class="app_heade_img">
			<image src="../../static/icon/ai.png" mode="" style="width: 100px; height: 100px;" />
		</div>
		<div class="regards_content">
			<ul>
				<li><span>AI_BUS</span></li>
				<li> <span>Version 1.0.0</span></li>
			</ul>
		</div>


		<div class="version_info">
			<ul class="">
				<li>版本信息</li>
				<fui-collapse accordion>
					<fui-collapse-item :index="index" v-for="(item,index) in items" :key="index">
						<view class="fui-item__box">
							<image :src="item.src" class="fui-logo"></image>
							<text>{{item.version_num}}</text>
						</view>
						<template v-slot:content>
							<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.desc}}</view>
						</template>
					</fui-collapse-item>
				</fui-collapse>


			</ul>
		</div>
	</div>
</template>

<script>
	import {
		httpRequest
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				items: [],
			}
		},
		methods: {
			VersionInfo() {
				httpRequest('/api/version', 'get').then((res) => {
					for (let i = 0; i < res.length; i++) {
						let query = {
							version_num: res[i].version_num,
							desc: res[i].desc
						}
						this.items.push(query)
					}

				}).catch(err => {

					uni.showToast({
						icon: 'error',
						title: err,
						position: 'center',
						duration: 1500
					})
				})
			}
		},
		mounted() {
			this.VersionInfo()
		},
		onShow() {}
	}
</script>

<style scoped>
	.app_heade_img {
		width: 100px;
		height: 100px;
		border-radius: 10px;
		/* border: 1px solid #000; */

		margin: 10px auto;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

	}

	.regards_content {
		margin-top: 15px;
		font-size: 18px;
		font-weight: 700;
		text-align: center;
		margin-bottom: 8px;
	}

	.regards_content>ul>li:last-child {
		font-size: 14px;
		margin-top: 6px;
		font-weight: inherit;
	}


	.version_info {
		width: 90%;
		height: 100%;
		margin: 0 auto;
		/* border: 1px solid #000; */
		border-radius: 10px;

		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

	}

	.version_info>ul {
		padding: 10px 15px;
	}

	.version_info>ul>li {
		border-bottom: 1px solid rgb(245, 245, 245);
		font-size: 15px;
		padding-bottom: 8px;
	}

	.fui-item__box {
		width: 100%;
		padding: 26rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.fui-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
		display: block;
	}

	.fui-descr {
		width: 100%;
		padding: 32rpx;
		font-size: 28rpx;
		line-height: 52rpx;
		/* color: #7F7F7F; */
		word-break: break-all;
		box-sizing: border-box;
	}
</style>